<template>
  <div class="about-me-container">
    <WebsiteConfig :keys="[
      'avatarImg',
    ]">
      <template #default="{ config }">
        <!-- 头像和标签部分 -->
        <div class="profile-section" v-motion-slide-visible-once-bottom>
          <div class="avatar-container">
            <el-avatar :size="150" src="/api/placeholder/200/200" class="avatar" v-motion-pop-visible-once
              v-if="!config" />
            <el-avatar :size="150" :src="config.avatarImg" class="avatar" v-motion-pop-visible-once v-else />
            <div class="tags-cloud">
              <span v-for="(tag, index) in tags" :key="index" class="tag" :style="{
                left: `calc(50% + ${tag.position.x}px)`,
                top: `calc(50% + ${tag.position.y}px)`,
                '--delay': `${index * 0.1}s`,
              }" v-motion-slide-visible-once>
                {{ tag.text }}
              </span>
            </div>
          </div>

          <h1 class="title" v-motion-slide-visible-once-bottom>关于我</h1>
          <p class="quote" v-motion-slide-visible-once-bottom>「科技让生活更加精彩，创意使世界更加美好」</p>
        </div>
      </template>
    </WebsiteConfig>
    <!-- 卡片网格部分 - 使用vue-grid-layout -->
    <div class="grid-layout-container">
      <!-- 使用GridLayout组件，设置布局参数 -->
      <grid-layout :layout="filteredLayout" :col-num="12" :row-height="30" :is-draggable="false" :is-resizable="false"
        :vertical-compact="true" :use-css-transforms="true" :margin="[10, 10]" :draggable-restrict="true"
        class="grid-layout" @layout-updated="onLayoutUpdated">
        <!-- 欢迎卡片 -->
        <grid-item v-for="item in filteredLayout" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h"
          :i="item.i">
          <!-- 欢迎卡片 -->
          <el-card v-if="item.i === '0'" class="grid-card welcome-card" shadow="hover" v-motion-pop-visible-once>
            <template #header>
              <div class="card-header">
                <span>很高兴认识你 👋</span>
              </div>
            </template>
            <div class="card-content">
              <p>我是一名热爱科技与创意的网站开发者，喜欢探索新技术并将其应用到实际项目中。</p>
              <p>这个博客是我记录学习心得和分享个人见解的地方，希望能与你产生共鸣！</p>
            </div>
          </el-card>

          <!-- 我的追求 -->
          <el-card v-else-if="item.i === '1'" class="grid-card pursuit-card" shadow="hover" v-motion-pop-visible-once>
            <template #header>
              <div class="card-header">
                <span>我的追求 🎯</span>
              </div>
            </template>
            <div class="card-content">
              <ul class="pursuit-list">
                <li v-for="(pursuit, index) in pursuits" :key="index" v-motion-slide-visible-once-bottom
                  :delay="50 * index">
                  {{ pursuit }}
                </li>
              </ul>
            </div>
          </el-card>

          <!-- 就是个卡片 - 立方体动画 -->
          <el-card v-else-if="item.i === '2'" class="grid-card clock-card" shadow="hover" v-motion-pop-visible-once>
            <div class="bg">
              <div class="card-content">
                <div class="cube-container">
                  <div class="spinner">
                    <div class="cube-face front"></div>
                    <div class="cube-face back"></div>
                    <div class="cube-face right"></div>
                    <div class="cube-face left"></div>
                    <div class="cube-face top"></div>
                    <div class="cube-face bottom"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="blob"></div>
          </el-card>

          <!-- 就是个卡片 - 波浪动画 -->
          <el-card v-else-if="item.i === '3'" class="grid-card wave-card" shadow="hover" v-motion-pop-visible-once>
            <div class="wave-container">
              <div class="wave wave1"></div>
              <div class="wave wave2"></div>
              <div class="wave wave3"></div>
              <div class="wave wave4"></div>
            </div>
          </el-card>

          <!-- 就是个卡片 - 粒子动画 -->
          <el-card v-else-if="item.i === '4'" class="grid-card particles-card" shadow="hover" v-motion-pop-visible-once>
            <div class="particles-container">
              <div v-for="n in 20" :key="n" class="particle"></div>
            </div>
          </el-card>

          <!-- 技能卡片 - 修改为浮动图标 -->
          <el-card v-else-if="item.i === '5'" class="grid-card skills-card" shadow="hover" v-motion-pop-visible-once>
            <template #header>
              <div class="card-header">
                <span>我的技能 🛠️</span>
              </div>
            </template>
            <div class="card-content">
              <div class="floating-skills-container" ref="skillsContainer">
                <div v-for="(skill, index) in skills" :key="index" class="floating-skill" :style="{
                  left: `${skill.position.x}%`,
                  top: `${skill.position.y}%`,
                  animationDuration: `${skill.duration}s`,
                  animationDelay: `${skill.delay}s`
                }">
                  <div class="skill-icon" :style="{ backgroundColor: skill.color }">
                    <img v-if="skill.icon" :src="skill.icon" alt="技能图标" loading="lazy" />
                    <span v-else>{{ skill.name.charAt(0) }}</span>
                  </div>
                  <span class="skill-name">{{ skill.name }}</span>
                </div>
              </div>
            </div>
          </el-card>

          <!-- 番剧卡片 - 修改为封面图展示 -->
          <el-card v-else-if="item.i === '6'" class="grid-card anime-card" shadow="hover" v-motion-pop-visible-once>
            <template #header>
              <div class="card-header">
                <span>我追的番剧 📺</span>
                <a href="https://space.bilibili.com/357358593/bangumi" target="_blank" class="external-link">
                  <el-icon>
                    <VideoCamera />
                  </el-icon>
                  番剧
                </a>
              </div>
            </template>
            <div class="card-content">
              <div class="anime-grid">
                <div v-for="(anime, index) in animes" :key="index" class="anime-cover-item"
                  v-motion-slide-visible-once-bottom :delay="50 * index">
                  <div class="anime-cover" :style="{ backgroundImage: `url(${anime.cover})` }">
                    <div class="anime-overlay">
                      <h3>{{ anime.title }}</h3>
                      <p>{{ anime.description }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>

          <!-- 音乐卡片 - 修改为歌单展示 -->
          <el-card v-else-if="item.i === '7'" class="grid-card music-card" shadow="hover" v-motion-pop-visible-once>
            <template #header>
              <div class="card-header">
                <span>我的音乐品味 🎵</span>
                <a href="https://music.163.com/#/user/home?id=123456" target="_blank" class="external-link">
                  <el-icon>
                    <Headset />
                  </el-icon>
                  网易云音乐
                </a>
              </div>
            </template>
            <div class="card-content">
              <div class="playlist-grid">
                <div v-for="(playlist, index) in musicPlaylists" :key="index" class="playlist-item"
                  v-motion-slide-visible-once-bottom :delay="50 * index">
                  <a :href="playlist.link" target="_blank" class="playlist-link">
                    <div class="playlist-cover" :style="{ backgroundImage: `url(${playlist.cover})` }">
                      <div class="playlist-overlay">
                        <h4>{{ playlist.title }}</h4>
                        <p>{{ playlist.description }}</p>
                        <el-icon class="play-icon">
                          <VideoPlay />
                        </el-icon>
                      </div>
                    </div>
                  </a>
                  <div class="playlist-info">
                    <span class="playlist-title">{{ playlist.title }}</span>
                    <span class="playlist-count">{{ playlist.trackCount }}首</span>
                  </div>
                </div>
              </div>
            </div>
          </el-card>

          <!-- 社交媒体卡片 -->
          <el-card v-else-if="item.i === '8'" class="grid-card social-card" shadow="hover" v-motion-pop-visible-once>
            <template #header>
              <div class="card-header">
                <span>找到我 🔍</span>
              </div>
            </template>
            <div class="card-content social-links">
              <a v-for="(social, index) in socials" :key="index" :href="social.link" target="_blank" class="social-link"
                v-motion-pop-visible-once :delay="50 * index">
                <div class="social-icon" :style="{ backgroundColor: social.color }">
                  <el-icon>
                    <component :is="social.icon" />
                  </el-icon>
                </div>
                <span>{{ social.name }}</span>
              </a>
            </div>
          </el-card>
        </grid-item>
      </grid-layout>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, onBeforeUnmount, computed } from 'vue'
import { useMotion } from '@vueuse/motion'
import { useNow } from '@vueuse/core'
import VueAnalogClock from 'vue3-analog-clock'
import WebsiteConfig from '@/components/WebsiteConfig/index.vue'  // 导入网站配置组件
import {
  listLayoutConfig,
  addLayoutConfig,
  updateLayoutConfig,
  delLayoutConfig,
  batchUpdateLayoutConfig
} from "@/api/bk/LayoutConfig";

let intersectionObserver = null;
// 注意下面两条声明
const emit = defineEmits(['layoutUpdated'])
// 在布局更新时触发
const onLayoutUpdated = () => {
  emit('layoutUpdated')
}

// 定义卡片布局数据 - 初始默认布局
const defaultLayout = [
  { x: 0, y: 0, w: 6, h: 6, i: '0', statedel: 0 },
  { x: 6, y: 1, w: 6, h: 4, i: '1', statedel: 0 },
  { x: 0, y: 4, w: 3, h: 10, i: '2', statedel: 0 },
  { x: 4, y: 4, w: 4, h: 8, i: '3', statedel: 0 },
  { x: 8, y: 4, w: 4, h: 8, i: '4', statedel: 0 },
  { x: 0, y: 6, w: 6, h: 8, i: '5', statedel: 0 },
  { x: 6, y: 10, w: 6, h: 8, i: '6', statedel: 0 },
  { x: 0, y: 14, w: 6, h: 8, i: '7', statedel: 0 },
  { x: 8, y: 18, w: 4, h: 6, i: '8', statedel: 0 },
]
const layout = ref([...defaultLayout])
const currentPage = 'aboutview' // 当前页面标识

// 过滤布局，只显示statedel为0的项目
const filteredLayout = computed(() => {
  return layout.value.filter(item => item.statedel !== 1);
});

// 加载布局配置
const loadLayout = async () => {
  try {
    const res = await listLayoutConfig({
      page: currentPage,
      pageSize: 20,
    });

    if (res.rows?.length > 0) {
      // 直接使用 res.rows 作为布局配置数组
      const savedLayout = res.rows;
      console.log('加载的布局配置:', savedLayout);

      // 检查是否是数组
      if (Array.isArray(savedLayout)) {
        // 可选：过滤或映射字段，确保符合布局组件要求（例如保留 x、y、w、h、i）
        layout.value = savedLayout.map(item => ({
          x: item.x,
          y: item.y,
          w: item.w,
          h: item.h,
          i: item.i.toString(), // 确保 i 是字符串（部分布局库要求）
          statedel: item.statedel || 0, // 添加statedel字段，默认为0（显示）
          // 其他必要字段...
        }));
      } else {
        console.warn('配置数据格式异常：非数组结构');
        layout.value = [...defaultLayout]; // 使用默认布局
      }
    } else {
      console.log('无保存的布局配置，使用默认布局');
      layout.value = [...defaultLayout]; // 使用默认布局
    }
  } catch (e) {
    console.error('加载布局配置失败:', e);
    // 提示用户（示例使用 Element UI 的 Message）
    ElMessage.error('布局加载失败，请稍后重试');
    layout.value = [...defaultLayout]; // 出错时使用默认布局
  }
};


// 加载保存的布局
const loadSavedLayout = () => {
  const savedLayout = localStorage.getItem('aboutPageLayout')
  if (savedLayout) {
    try {
      layout.value = JSON.parse(savedLayout)
    } catch (e) {
      console.error('无法解析保存的布局:', e)
      layout.value = [...defaultLayout] // 解析错误时使用默认布局
    }
  } else {
    layout.value = [...defaultLayout] // 没有保存的布局时使用默认布局
  }
}

// 创建随机粒子位置
const initParticlePositions = () => {
  nextTick(() => {
    const particlesContainer = document.querySelector('.particles-container')
    if (particlesContainer) {
      const particles = particlesContainer.querySelectorAll('.particle')
      const containerWidth = particlesContainer.clientWidth
      const containerHeight = particlesContainer.clientHeight

      particles.forEach((particle, index) => {
        // 随机位置
        const x = Math.random() * containerWidth
        const y = Math.random() * containerHeight
        // 增加动画延迟，降低同时动画数量
        const delay = Math.random() * 20 // 增加最大延迟
        // 增加动画持续时间，减少重绘频率
        const duration = 20 + Math.random() * 30 // 增加动画时长

        particle.style.left = `${x}px`
        particle.style.top = `${y}px`
        particle.style.animationDelay = `${delay}s`
        particle.style.animationDuration = `${duration}s`
      })
    }
  })
}
// 2. 添加视口检测，优化性能
const setupIntersectionObserver = () => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      const target = entry.target;
      // 查找目标元素内的所有动画元素
      const animatedElements = target.querySelectorAll('.wave, .particle, .floating-skill, .spinner');

      if (entry.isIntersecting) {
        // 当元素进入视口时启用动画
        target.classList.add('is-visible');
        animatedElements.forEach(el => {
          el.style.animationPlayState = 'running';
        });
      } else {
        // 当元素离开视口时暂停动画
        target.classList.remove('is-visible');
        animatedElements.forEach(el => {
          el.style.animationPlayState = 'paused';
        });
      }
    });
  }, { threshold: 0.1 });

  // 观察所有卡片
  document.querySelectorAll('.grid-card').forEach(card => {
    observer.observe(card);
  });

  return observer;
}


import {
  VideoCamera,
  Headset,
  ArrowLeft,
  ArrowRight,
  VideoPause,
  VideoPlay,
  Platform,
  Promotion,
  QuestionFilled
} from '@element-plus/icons-vue'

const interactiveElement = ref(null)
const interactiveDots = ref([])
const colors = ['#42b883', '#35495e', '#3498db', '#e74c3c', '#f39c12', '#9b59b6']

// 修改标签数据结构，添加位置信息
const tags = ref([
  { text: "🤖️ 数码科技爱好者", position: { x: -130, y: -100 } },
  { text: "💻 Web开发者", position: { x: 130, y: -80 } },
  { text: "🎮 游戏玩家", position: { x: 180, y: 30 } },
  { text: "📚 终身学习者", position: { x: 100, y: 120 } },
  { text: "🎬 动漫爱好者", position: { x: -100, y: 100 } },
  { text: "☕ 咖啡上瘾者", position: { x: -180, y: 0 } },
])

// 追求列表
const pursuits = ref([
  "探索前沿技术，掌握新型开发框架",
  "创建有价值且用户友好的产品",
  "不断学习，保持好奇心",
  "与志同道合的人合作，创造更好的作品"
])

// 技能数据 - 修改为带位置的浮动技能
const skills = ref([
  {
    name: "Vue.js",
    color: "#42b883",
    icon: "https://i-blog.csdnimg.cn/direct/03b886d8672e4583adc6d874bad72575.png", // 图标URL
    position: { x: 20, y: 30 },
    duration: 15,
    delay: 0
  },
  {
    name: "JavaScript",
    color: "#f7df1e",
    icon: "",
    position: { x: 70, y: 20 },
    duration: 18,
    delay: 2
  },
  {
    name: "CSS/SCSS",
    color: "#264de4",
    icon: "",
    position: { x: 40, y: 70 },
    duration: 20,
    delay: 1
  },
  {
    name: "Node.js",
    color: "#68a063",
    icon: "",
    position: { x: 80, y: 60 },
    duration: 16,
    delay: 3
  },
  {
    name: "TypeScript",
    color: "#007acc",
    icon: "",
    position: { x: 30, y: 50 },
    duration: 22,
    delay: 1.5
  },
  {
    name: "Python",
    color: "#3776ab",
    icon: "",
    position: { x: 60, y: 40 },
    duration: 19,
    delay: 2.5
  }
])


// 番剧数据
const animes = ref([
  {
    title: "邪神与厨二病少女",
    description: "一位少女与恶魔邪神酱展开的略危险的同居生活喜剧！",
    cover: "https://cdn.aqdstatic.com:966/age/20220129.jpg"
  },
  {
    title: "败犬女主太多了！",
    description: "没能赢得心爱之人的恋人席位的女孩——失败的女主角。",
    cover: "https://cdn.aqdstatic.com:966/age/20240118.jpg"
  },
  {
    title: "轻音少女",
    description: "四人女子组合在一个即将被废部的轻音乐部从零开始展开音乐活动的故事。",
    cover: "https://cdn.aqdstatic.com:966/age/20090010.jpg"
  },
  { title: "孤独摇滚！", description: "吉他英雄🎸", cover: "https://cdn.aqdstatic.com:966/age/20220121.jpg" },
  {
    title: "异世界舅舅",
    description: "现代人穿越异世界的奇幻冒险",
    cover: "https://cdn.aqdstatic.com:966/age/20220134.jpg"
  },
  {
    title: "葬送的芙莉莲",
    description: "魔法使芙莉莲与勇者辛美尔等人在长达10年的冒险中打败了魔王",
    cover: "https://cdn.aqdstatic.com:966/age/20230207.jpg"
  },
])

// 音乐歌单数据
const musicPlaylists = ref([
  {
    title: "霓虹灯下（日系爵士＆city pop)",
    description: "pop和爵士穿插摆放",
    cover: "https://p1.music.126.net/P19OTLfEfkYgdkcSM6FrMg==/109951163755259583.jpg?param=200y200",
    link: "https://music.163.com/#/playlist?id=2220142299",
    trackCount: 32
  },
  {
    title: "戴上耳机，沉浸在自己掌控的世界",
    description: "各种类型都有让你度过闲暇时光",
    cover: "https://p1.music.126.net/IpUCMmMXch_99nn9NL6A7A==/109951166278242135.jpg?param=200y200",
    link: "https://music.163.com/#/playlist?id=5240263623",
    trackCount: 45
  },
  {
    title: "Jazz浪漫橘调&高级",
    description: "当夕阳悄然落下，黄昏轻抚过天际，世界仿佛被温暖的橙色所包围",
    cover: "https://p1.music.126.net/f1rhgHIxMh2GrbjH4SKJWQ==/109951169144506478.jpg?param=200y200",
    link: "https://music.163.com/#/playlist?id=8911908307",
    trackCount: 28
  },
])

// 社交媒体
const socials = ref([
  { name: "GitHub", icon: "Platform", link: "#", color: "#333" },
  { name: "微博", icon: "Promotion", link: "#", color: "#e6162d" },
  { name: "知乎", icon: "QuestionFilled", link: "#", color: "#0084ff" },
  { name: "B站", icon: "VideoCamera", link: "#", color: "#fb7299" },
])


// 时钟状态
const clockType = ref(localStorage.getItem('preferredClockType') || 'analog')
const currentTime = ref(null)

// 时间更新逻辑
let timer = null
const updateTime = () => {
  currentTime.value = new Date()
  localStorage.setItem('preferredClockType', clockType.value)
}

// 格式化时间
const formattedTime = computed(() => {
  return currentTime.value?.toLocaleTimeString('zh-CN', {
    hour12: false,
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  }) ?? '--:--:--'
})

const formattedDate = computed(() => {
  return currentTime.value?.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  }) ?? '加载日期中...'
})


// 处理鼠标移动事件，创建点
const handleMouseMove = (event) => {
  if (interactiveElement.value) {
    const rect = interactiveElement.value.getBoundingClientRect()
    const x = event.clientX - rect.left
    const y = event.clientY - rect.top

    // 创建新的点
    const newDot = {
      x,
      y,
      color: colors[Math.floor(Math.random() * colors.length)],
      id: Date.now()
    }

    // 添加新点并保持数量限制
    interactiveDots.value.push(newDot)
    if (interactiveDots.value.length > 30) {
      interactiveDots.value.shift()
    }
  }
}

// 技能图标动画
let skillsAnimationFrame = null

const animateSkills = () => {
  skills.value = skills.value.map(skill => {
    // 根据不同的技能创建不同的移动轨迹
    // 这里简单实现一个横向来回移动的效果，实际可根据需求调整
    const newX = (skill.position.x + 0.1) % 100
    return { ...skill, position: { x: newX, y: skill.position.y } }
  })
  skillsAnimationFrame = requestAnimationFrame(animateSkills)
}



onMounted(() => {
  // 加载布局数据
  loadLayout()

  // 设置视口监控，优化动画性能
  intersectionObserver = setupIntersectionObserver();

  // 初始化互动元素
  nextTick(() => {
    // 在这里设置interactiveElement，例如使用ref获取一个DOM元素
    interactiveElement.value = document.querySelector('.about-me-container') // 或者使用你想要的元素
    if (interactiveElement.value) {
      // 使用passive: true优化性能
      interactiveElement.value.addEventListener('mousemove', handleMouseMove, { passive: true })
    }

    // 初始化粒子位置
    initParticlePositions()

    // 使用IntersectionObserver优化性能，只在元素可见时加载动画
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const card = entry.target;
          // 添加可见类，可以用于触发动画
          card.classList.add('is-visible');
          // 如果是粒子卡片，确保粒子位置已初始化
          if (card.classList.contains('particles-card')) {
            initParticlePositions();
          }
          // 一旦可见，不再需要观察
          observer.unobserve(card);
        }
      });
    }, { threshold: 0.1 });

    // 观察所有卡片
    document.querySelectorAll('.grid-card').forEach(card => {
      observer.observe(card);
    });
  })

  updateTime()
  timer = setInterval(updateTime, 1000)
})

onBeforeUnmount(() => {
  // 清除事件监听和动画帧
  if (interactiveElement.value) {
    interactiveElement.value.removeEventListener('mousemove', handleMouseMove)
  }

  if (skillsAnimationFrame) {
    cancelAnimationFrame(skillsAnimationFrame)
  }


  // 清理intersectionObserver
  if (intersectionObserver) {
    intersectionObserver.disconnect();
  }

  // 清除定时器
  clearInterval(timer)
  timer = null

  // 保存最终布局
  const currentLayout = document.querySelector('.grid-layout')?.__vue__?.layout
  if (currentLayout) {
    localStorage.setItem('aboutPageLayout', JSON.stringify(currentLayout))
  }
})
</script>

<style scoped>
/* 新增立方体样式 - 优化性能 */
.cube-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 250px;
}

.spinner {
  width: 100px;
  height: 100px;
  animation: spinner-rotate 10s infinite linear;
  transform-style: preserve-3d;
  will-change: transform;
  /* 优化动画性能 */
}

.cube-face {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid var(--el-color-primary-light-3);
  background: rgba(var(--el-color-primary-rgb), 0.1);
  /* 移除模糊滤镜，提高性能 */
  /* backdrop-filter: blur(5px); */
  box-shadow: 0 0 12px rgba(var(--el-color-primary-rgb), 0.1);
  backface-visibility: hidden;
  /* 优化3D渲染 */
}

.cube-face::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg,
      transparent 20%,
      rgba(var(--el-color-primary-rgb), 0.3) 50%,
      transparent 80%);
}

.front {
  transform: translateZ(50px);
}

.back {
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  transform: rotateX(-90deg) translateZ(50px);
}

@keyframes spinner-rotate {
  0% {
    transform: rotateX(0) rotateY(0) rotateZ(0);
  }

  100% {
    transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
  }
}

/* 调整原有时钟卡片样式 */
.clock-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  z-index: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
  contain: content;
  /* 优化渲染边界 */
}

.bg {
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  z-index: 2;
  background: rgba(255, 255, 255);
  /* 移除高耗能滤镜 */
  /* backdrop-filter: blur(24px); */
  border-radius: 10px;
  overflow: hidden;
  outline: 2px solid white;
}

.blob {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background-color: #ff0000;
  opacity: 0.8;
  /* 降低不透明度 */
  filter: blur(8px);
  /* 降低模糊半径 */
  animation: blob-bounce 6s infinite linear;
  will-change: transform;
  /* 告诉浏览器优化此动画 */
}

@keyframes blob-bounce {
  0% {
    transform: translate(-100%, -100%);
    /* 左上 */
  }

  /* 向右移动（上方留出5%时间做平滑转弯） */
  20% {
    transform: translate(0%, -100%);
    /* 右上（原25%，提前到20%） */
  }

  /* 向下移动（右方留出5%时间转弯） */
  45% {
    transform: translate(0%, 0%);
    /* 右下（原50%，延后到45%） */
  }

  /* 向左移动（下方留出5%时间转弯） */
  70% {
    transform: translate(-100%, 0%);
    /* 左下（原75%，提前到70%） */
  }

  /* 向上移动（左方留出30%时间回到起点，形成缓动） */
  100% {
    transform: translate(-100%, -100%);
    /* 左上 */
  }
}

.clock-card:hover .cube-face {
  border-color: var(--el-color-primary);
  background: rgba(var(--el-color-primary-rgb), 0.15);
}

/* 波浪动画卡片样式 - 减少波浪数量和降低复杂度 */
.wave-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, #42b883, #35495e);
  contain: content;
  /* 优化渲染边界 */
}

.wave-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 38% 42% 0 0;
  transition: 0.5s;
  will-change: transform;
  /* 优化渲染 */
}

.wave1 {
  animation: wave 15s linear infinite;
  /* 减慢动画速度 */
  z-index: 4;
  opacity: 0.7;
  animation-delay: 0s;
  bottom: 0;
}

.wave2 {
  animation: wave 18s linear infinite;
  /* 减慢动画速度 */
  z-index: 3;
  opacity: 0.5;
  animation-delay: -2s;
  bottom: 10px;
}

/* 减少波浪数量，只保留两个 */
/*
.wave3 {
  animation: wave 12s linear infinite;
  z-index: 2;
  opacity: 0.3;
  animation-delay: -4s;
  bottom: 15px;
}

.wave4 {
  animation: wave 14s linear infinite;
  z-index: 1;
  opacity: 0.2;
  animation-delay: -6s;
  bottom: 20px;
}
*/

@keyframes wave {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-25%);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* 粒子动画卡片样式 - 减少粒子数量和优化动画 */
.particles-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(45deg, #3498db, #9b59b6);
  contain: content;
  /* 优化渲染边界 */
}

.particles-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: float 25s infinite linear;
  /* 简化为线性动画 */
  will-change: transform, opacity;
  /* 优化渲染 */
}

.particle:nth-child(even) {
  width: 15px;
  height: 15px;
}

.particle:nth-child(3n) {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.3);
}

.particle:nth-child(5n) {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.6);
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  50% {
    transform: translateY(-50px) translateX(50px);
    /* 减少移动距离 */
    opacity: 0.5;
  }

  75% {
    opacity: 0.2;
  }
}

.about-me-container {
  margin: 0 auto;
  padding: 0.6rem;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: rgba(255, 255, 255, 0.3);
  /* 调整为半透明白色 */
  backdrop-filter: blur(8px);
  /* 添加毛玻璃模糊效果 */
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

/* 头像和标签部分 */
.profile-section {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  padding: 20px 0;
}

.avatar-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  margin: 0 auto 30px;
}

.avatar {
  border: 4px solid #fff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  z-index: 2;
}

.avatar:hover {
  transform: scale(1.05);
}

.tags-cloud {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  /* 移除旋转动画 */
}

.tag {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  background-color: #f0f9ff;
  color: #409eff;
  padding: 6px 15px;
  border-radius: 20px;
  font-size: 0.15rem;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, opacity 0.3s ease;
  /* 降低动画频率，改为5秒 */
  animation: floatUpDown 5s ease-in-out infinite;
  animation-delay: var(--delay);
  pointer-events: auto;
  z-index: 1;
  will-change: transform;
  /* 优化渲染 */
}

/* 简化上下浮动动画 */
@keyframes floatUpDown {

  0%,
  100% {
    transform: translate(-50%, -50%);
  }

  50% {
    transform: translate(-50%, calc(-50% - 8px));
  }
}

.tag:hover {
  transform: translate(-50%, -50%) scale(1.1) !important;
  opacity: 1 !important;
  z-index: 10;
  animation-play-state: paused;
}

.title {
  font-size: 0.5rem;
  margin-bottom: 10px;
  color: #42b883;
  /* 使用纯色替代渐变 */
  position: relative;
  display: inline-block;
}

.title::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: #35495e;
  /* 使用纯色替代渐变 */
}

.quote {
  font-size: 0.2rem;
  color: #606266;
  font-style: italic;
  margin-bottom: 20px;
}

/* 卡片网格部分 - 使用vue-grid-layout */
.grid-layout-container {
  width: 100%;
  position: relative;
  margin-top: 20px;
}

.grid-layout {
  background-color: transparent;
  transition: height 0.3s;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  /* 确保不超出父容器 */
  overflow: hidden;
  /* 防止内容溢出 */
}

/* 自定义拖拽手柄样式 */
.vue-grid-item.vue-draggable-dragging {
  z-index: 10;
  cursor: move;
}

/* 调整大小手柄样式 */
.vue-grid-item .vue-resizable-handle {
  background-color: rgba(66, 184, 131, 0.3);
  border-radius: 0 0 0 5px;
}

/* 拖拽限制区域样式 */
.vue-grid-layout .vue-grid-item.vue-draggable-dragging {
  opacity: 0.8;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

/* 优化不可见元素的动画性能 - 重要优化 */
.grid-card:not(.is-visible) .wave,
.grid-card:not(.is-visible) .particle,
.grid-card:not(.is-visible) .spinner,
.grid-card:not(.is-visible) .floating-skill {
  animation-play-state: paused !important;
  /* 隐藏不可见元素 */
  display: none !important;
}

/* 可见时启用动画 */
.grid-card.is-visible .wave,
.grid-card.is-visible .particle,
.grid-card.is-visible .spinner,
.grid-card.is-visible .floating-skill {
  animation-play-state: running;
  display: block !important;
}

/* 减少卡片悬停时的变换，提高性能 */
.grid-card:hover {
  transform: translateY(-3px);
  /* 减少变换量 */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1) !important;
  /* 减少阴影 */
}

/* 原卡片网格样式保留用于兼容 */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.grid-card {
  border-radius: 15px;
  transition: all 0.3s ease;
  contain: content;
  /* 优化渲染边界 */
  display: flex;
  flex-direction: column;
  height: 100%;
  /* 确保不超出父容器 */
  overflow: hidden;
  /* 防止内容溢出 */
  overflow: auto;
  /* 内容过多时允许滚动 */
}

.card-header {
  height: 100%;
  overflow: auto;
  /* 内容过多时允许滚动 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 0.1rem;
}

.card-content {
  padding: 15px 15px;
  font-size: 0.1rem;
  line-height: 1.3;
}

/* 欢迎卡片 */
.welcome-card {
  grid-column: span 2;
}

.welcome-card .card-content p {
  font-size: 0.1rem;
  line-height: 1.3;
  margin-bottom: 15px;
}

/* 追求卡片 */
.pursuit-list {
  list-style-type: none;
  padding: 0;
}

.pursuit-list li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 18px;
  line-height: 1.5;
  font-size: 0.1rem;
}

.pursuit-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #42b883;
  font-weight: bold;
}

/* 添加加载状态样式 */
.loading {
  text-align: center;
  padding: 20px;
  color: var(--el-color-info);
}

/* 调整模拟时钟位置 */
.analog-clock {
  margin: 0 auto;
}

.digital-clock {
  text-align: center;
  padding: 20px 0;
}

.digital-clock .time {
  font-size: 0.3rem;
  color: var(--el-color-primary);
  text-shadow: 0 0 8px rgba(var(--el-color-primary-rgb), 0.2);
}

.digital-clock .date {
  font-size: 0.3em;
  color: var(--el-text-color-secondary);
  margin-top: 10px;
}

.clock-controls {
  margin-left: auto;
}

.clock-controls :deep(.el-button-group) .el-button {
  padding: 8px 15px;
}

.clock-controls :deep(.el-button-group) .el-button--primary {
  background: var(--el-color-primary);
  border-color: var(--el-color-primary);
}

@keyframes fadeOut {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}

.interactive-hint {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  text-align: center;
  color: #909399;
  font-size: 0.3rem;
  z-index: 1;
}

/* 技能卡片 - 新样式 - 优化动画 */
.skills-card {
  grid-column: span 2;
}

.floating-skills-container {
  position: relative;
  height: 300px;
  background-color: #f9fafb;
  border-radius: 8px;
  overflow: hidden;
}

.floating-skill {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease;
  /* 优化动画，增加持续时间减少频率 */
  animation: floatHorizontal 25s infinite alternate linear;
  will-change: transform;
  /* 优化渲染 */
}

@keyframes floatHorizontal {
  0% {
    transform: translateX(-20px);
  }

  100% {
    transform: translateX(20px);
  }
}

.skill-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 8px;
}

.skill-icon img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.skill-name {
  font-size: 0.1rem;
  font-weight: 500;
  color: #606266;
}

/* 番剧卡片 - 新样式 - 简化变换 */
.anime-card {
  grid-column: span 2;
}

.anime-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 15px;
}

.anime-cover-item {
  perspective: 1000px;
}

.anime-cover {
  height: 250px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.5s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.anime-cover:hover {
  transform: scale(1.03);
  /* 减少变换量 */
}

.anime-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background: rgba(0, 0, 0, 0.7);
  /* 使用纯色背景替代渐变 */
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.anime-cover:hover .anime-overlay {
  opacity: 1;
}

.anime-overlay h3 {
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.anime-overlay p {
  margin: 0;
  font-size: 0.08rem;
  line-height: 1.4;
  opacity: 0.9;
}

/* 音乐卡片 - 歌单样式 - 简化效果 */
.music-card {
  grid-column: span 2;
}

.playlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 10px;
}

.playlist-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.playlist-item:hover {
  transform: translateY(-3px);
  /* 减少变换量 */
}

.playlist-link {
  text-decoration: none;
  color: inherit;
}

.playlist-cover {
  height: 235px;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.playlist-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  /* 使用纯色背景替代渐变 */
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.playlist-item:hover .playlist-overlay {
  opacity: 1;
}

.playlist-overlay h4 {
  color: white;
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.playlist-overlay p {
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  font-size: 0.08rem;
  line-height: 1.4;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.2rem;
  color: white;
  opacity: 0;
  transition: all 0.3s ease;
}

.playlist-item:hover .play-icon {
  opacity: 1;
  font-size: 0.2rem;
}

.playlist-info {
  padding: 10px 0;
}

.playlist-title {
  display: block;
  font-size: 0.1rem;
  font-weight: 500;
  color: var(--el-text-color-primary);
  margin-bottom: 6px;
  line-height: 1.4;
}

.playlist-count {
  font-size: 0.08rem;
  color: var(--el-text-color-secondary);
  line-height: 1.2;
}

@media (max-width: 768px) {
  .playlist-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .playlist-cover {
    height: 150px;
  }
}

/* 社交媒体卡片 */
.social-links {
  margin-top: 5%;
  display: flex;
  flex-wrap: wrap;
  gap: 45px;
  justify-content: center;
}

.social-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #606266;
  transition: transform 0.3s ease;
}

.social-link:hover {
  transform: translateY(-3px);
  /* 减少变换量 */
}

.social-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-bottom: 8px;
  font-size: 0.2rem;
}

.social-link span {
  font-size: 0.15rem;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .avatar-container {
    width: 250px;
    height: 250px;
  }

  .tag {
    font-size: 0.2rem;
    padding: 4px 10px;
  }

  /* 减少移动端动画效果 */
  .spinner {
    animation-duration: 15s;
    /* 减慢动画 */
  }

  .wave,
  .particle,
  .floating-skill {
    animation-duration: 30s !important;
    /* 大幅减慢动画 */
  }

  /* 移动端减少粒子数量 */
  .particle:nth-child(n+10) {
    display: none;
  }
}

/* 外部链接样式 */
.external-link {
  display: flex;
  align-items: center;
  font-size: 0.15rem;
  color: #909399;
  text-decoration: none;
  transition: color 0.2s ease;
}

.external-link:hover {
  color: #409eff;
}

.external-link .el-icon {
  margin-right: 5px;
  font-size: 16px;
}

/* 添加防闪烁处理 */
body {
  overflow-x: hidden;
  /* 防止水平滚动 */
}

/* 添加GPU加速 */
.grid-card,
.spinner,
.wave,
.particle,
.floating-skill,
.anime-cover,
.playlist-cover {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


html,
body {
  background-color: #f8f9fa;
  /* 保持背景色一致 */
  margin: 0;
  padding: 0;
}

/* 减少粒子数量 */
.particle:nth-child(n+11) {
  display: none !important;
}

/* 优化媒体查询中的滤镜和动画处理 */
@media (max-width: 1200px) {

  /* 中等设备减少动画效果 */
  .wave3,
  .wave4 {
    display: none !important;
  }

  .particle:nth-child(n+8) {
    display: none !important;
  }
}
</style>
